<template>
  <view class="custom-tabbar">
    <view class="tabbar-container">
      <view v-for="(item, index) in tabList" :key="index" class="tabbar-item" :class="{ active: current === index && index !== 2 }" @click="redirectTo(index)">
        <!-- 特殊处理发布按钮 -->
        <view v-if="index === 2" class="tabbar-publish-wrapper">
          <view class="tabbar-publish-btn" @click.stop="showPublishModal">
            <tn-icon name="write" size="40" color="#ffffff"></tn-icon>
          </view>
        </view>
        <block v-else>
          <view class="tabbar-icon">
            <tn-icon :name="current === index ? item.selectedIconName : item.iconName" size="36"></tn-icon>
          </view>
          <view class="tabbar-text">{{ item.text }}</view>
        </block>
      </view>
    </view>
  </view>

  <!-- 发布弹出层 -->
  <tn-popup v-model="showPublish" open-direction="bottom" :round="10" :closeable="true">
    <view class="publish-popup">
      <view class="publish-options">
        <view class="publish-option" @click="navigate('/pages/publish/idle')">
          <view class="publish-icon idle-icon">
            <tn-icon name="buy-fill" size="50" color="#FFFFFF"></tn-icon>
          </view>
          <view class="publish-text">
            <view class="title">二手闲置</view>
            <view class="desc">30s发布宝贝</view>
          </view>
          <view class="option-arrow">
            <tn-icon name="right" size="40"></tn-icon>
          </view>
        </view>

        <view class="publish-option" @click="navigate('/pages/publish/post')">
          <view class="publish-icon post-icon">
            <tn-icon name="write-feather-fill" size="50" color="#FFFFFF"></tn-icon>
          </view>
          <view class="publish-text">
            <view class="title">发布墙墙</view>
            <view class="desc">吐槽、表白、求助</view>
          </view>
          <view class="option-arrow">
            <tn-icon name="right" size="40"></tn-icon>
          </view>
        </view>

        <view class="publish-option" @click="navigate('/pages/publish/reward')">
          <view class="publish-icon reward-icon">
            <tn-icon name="sword-fill" size="50" color="#FFFFFF"></tn-icon>
          </view>
          <view class="publish-text">
            <view class="title">赏金任务</view>
            <view class="desc">帮买、帮取、帮做</view>
          </view>
          <view class="option-arrow">
            <tn-icon name="right" size="40"></tn-icon>
          </view>
        </view>
      </view>

      <!-- 底部关闭按钮 -->
      <view class="close-btn-wrapper">
        <view class="close-btn" @click="closePublish">
          <tn-icon name="close" size="28" color="#6D6D6D"></tn-icon>
        </view>
      </view>
    </view>
  </tn-popup>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { onReady } from '@dcloudio/uni-app';
import { ref, watch, onMounted, nextTick } from 'vue';

onMounted(() => {
  updateCurrentTab();
});

onShow(() => {
  // getHeight();
});

onReady(async () => {});

const emit = defineEmits(['get-tabbarHeight']);

// 底部tabbar高度
const tabbarHeight = ref(0);
const getHeight = () => {
  uni
    .createSelectorQuery()
    .select('.custom-tabbar')
    .boundingClientRect((data) => {
      // console.log('data:', data);
      if (data) {
        // 成功获取到高度
        //       tabbarHeight.value = data.height;
        //       console.log('成功获取tabbarHeight:', tabbarHeight.value);
        //       emit('get-tabbarHeight', tabbarHeight.value);
      }
    })
    .exec();
};

// 页面路径与tabbar索引的映射
const pathMap = {
  'pages/index/index': 0,
  'pages/forum/forum': 1,
  'pages/publish/index': 2,
  'pages/trade/trade': 3,
  'pages/mine/mine': 4
};

// Tab列表配置
const tabList = [
  {
    iconName: 'home',
    selectedIconName: 'home-fill',
    text: '首页',
    pagePath: 'pages/index/index'
  },
  {
    iconName: 'edit-write',
    selectedIconName: 'edit-write-fill',
    text: '论坛',
    pagePath: 'pages/forum/forum'
  },
  {
    iconName: 'add',
    selectedIconName: 'add',
    text: '发布',
    pagePath: 'pages/publish/index'
  },
  {
    iconName: 'cart',
    selectedIconName: 'cart-fill',
    text: '市场',
    pagePath: 'pages/trade/trade'
  },
  {
    iconName: 'my',
    selectedIconName: 'my-fill',
    text: '我的',
    pagePath: 'pages/mine/mine'
  }
];

// 当前选中的tab索引
const current = ref(0);

// 发布弹出层显示状态
const showPublish = ref(false);

// 显示发布弹出层
const showPublishModal = () => {
  console.log('点击发布按钮');
  showPublish.value = true;
};

// 关闭发布弹出层
const closePublish = () => {
  showPublish.value = false;
};

// 切换Tab
const redirectTo = (index) => {
  if (index === 2) {
    return; // 发布按钮不做切换操作
  }

  if (current.value !== index) {
    current.value = index;
    // 跳转到对应页面
    uni.redirectTo({
      url: `/${tabList[index].pagePath}`
    });
  }
};

// 导航到指定页面
const navigate = (url) => {
  showPublish.value = false;
  setTimeout(() => {
    uni.navigateTo({
      url
    });
  }, 200);
};

// 根据当前页面路径设置选中的tab
const updateCurrentTab = () => {
  const pages = getCurrentPages();
  if (pages.length > 0) {
    const currentPage = pages[pages.length - 1];
    const path = currentPage.route;

    // 遍历pathMap找到对应的索引
    for (const key in pathMap) {
      if (path === key) {
        current.value = pathMap[key];
        break;
      }
    }
  }
};

// 当页面显示时更新选中的tab
uni.$on('updateTabBar', () => {
  updateCurrentTab();
});
</script>

<style lang="scss" scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  // height: 8%;
  background-color: $uni-bg-color;
  z-index: 999;
  box-shadow: 0 -2rpx 12rpx rgba(212, 205, 195, 0.2);
  border-top: 1rpx solid rgba(212, 205, 195, 0.3);

  .tabbar-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;

    &.active {
      .tabbar-icon {
        color: $uni-color-primary;
      }

      .tabbar-text {
        color: $uni-color-primary;
      }
    }

    .tabbar-icon {
      height: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $uni-text-color;
    }

    .tabbar-text {
      font-size: 20rpx;
      margin-top: 6rpx;
      color: $uni-text-color;
      font-family: 'Quicksand', sans-serif;
    }
  }

  .tabbar-publish-wrapper {
    transform: translateY(-20rpx);
  }

  .tabbar-publish-btn {
    width: 90rpx;
    height: 90rpx;
    background: linear-gradient(135deg, $uni-color-primary, $uni-highlight-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 12rpx rgba(163, 210, 230, 0.4);
    position: relative;
    z-index: 1;
    border: 2rpx solid rgba(255, 255, 255, 0.8);

    &::before {
      content: '';
      position: absolute;
      width: calc(100% - 8rpx);
      height: calc(100% - 8rpx);
      border-radius: 50%;
      background: linear-gradient(135deg, $uni-color-primary, $uni-highlight-color);
      z-index: -1;
      animation: pulse 1.5s infinite;
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

.publish-popup {
  width: 100%;
  padding: 30rpx;
  background-color: $uni-bg-color-grey;
  position: relative;
  padding-bottom: 120rpx; // 为底部关闭按钮留出空间

  .publish-options {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }

  .publish-option {
    display: flex;
    align-items: center;
    padding: 24rpx;
    border-radius: 16rpx;
    background-color: $uni-bg-color;
    position: relative;
    box-shadow: 0 2rpx 8rpx rgba(212, 205, 195, 0.1);
    border: 1rpx solid rgba(212, 205, 195, 0.2);

    .publish-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 12rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
      border: 1rpx solid rgba(255, 255, 255, 0.8);

      &.idle-icon {
        background-color: $uni-color-primary;
      }

      &.post-icon {
        background-color: #ffbdc4; // 柔和粉色
      }

      &.reward-icon {
        background-color: $uni-color-warning; // 浅鹅黄
      }
    }

    .publish-text {
      flex: 1;

      .title {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 6rpx;
        color: $uni-text-color-title;
      }

      .desc {
        font-size: 24rpx;
        color: $uni-text-color-grey;
      }
    }

    .option-arrow {
      color: $uni-text-color-grey;
    }
  }

  .close-btn-wrapper {
    position: absolute;
    bottom: 30rpx;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;

    .close-btn {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: $uni-bg-color;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 2rpx 10rpx rgba(212, 205, 195, 0.2);
      border: 1rpx solid rgba(212, 205, 195, 0.3);
    }
  }
}
</style>
